<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item> <i class="el-icon-lx-complaints"></i>投诉管理</el-breadcrumb-item>
                <el-breadcrumb-item>投诉登记</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="handle-box">
                <el-row>
                    <el-col :span="4">
                        <div class="grid-content bg-purple">投诉登记</div>
                    </el-col>
                </el-row>
            </div>
            <el-table :data="tableData" class="table" ref="multipleTable" header-cell-class-name="table-header">
                <el-table-column prop="userName" width="180" label="客户名称"></el-table-column>

                <el-table-column prop="freightbillId" label="货运单编号">
                </el-table-column>

                <el-table-column prop="complaintContent" label="投诉内容"> </el-table-column>

                <el-table-column label="操作" width="180" align="center">
                    <template slot-scope="scope">
                        <el-button type="text" icon="el-icon-edit" @click="handleEdit(scope.$index, scope.row)">投诉登记</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <!-- 编辑弹出框 -->
        <el-dialog title="投诉登记" :visible.sync="editVisible" width="30%">
            <el-form ref="form" :model="form" label-width="70px">
                <el-form-item label="投诉内容">
                    <el-input v-model="form.complaint_content2"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="editVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveEdit">确 定</el-button>
            </span>
        </el-dialog>

    </div>
</template>

<script>
export default {
    name: 'TopicManage',
    data() {
        return {
            categoryList: [],
            query: {},
            tableData: [],
            editVisible: false,
            id: '',
            form:'',
            category_name: '',
            freightbillId:"",
            form:{
                 complaint_content2:""
            }
        };
    },
    created() {
        this.id = localStorage.getItem('id');
        console.log(this.id);
        this.findCategory();
    },
    methods: {
        //查询所有数据
        findCategory() {
            this.$axios
                .post('/api/complaints/findComplaintsById/' + this.id, this.query)
                .then((res) => {
                    console.log(res);
                    if (res.data.code == 200) {
                        this.tableData = res.data.data;
                        this.complaint_content = res.data.data.complaint_content;
                        console.log(this.user_name);
                    }
                })
                .catch((err) => {
                    console.log(err);
                });
        },
       
        // handleEdit(index, row) {
        //     // this.idx = index;
        //     // this.form = row;
        //     console.log(row);
        //     this.complaint_content2 = this.complaint_content
        //     this.editVisible = true;
        // },
        handleEdit: function(index,row){
            console.log(row);
            this.form.complaint_content2 = row.complaintContent
            this.freightbillId = row.freightbillId
            this.editVisible = true;
        },
        //保存编辑
        saveEdit() {
            
            this.$message.success(`修改成功`);
            console.log(this.form.complaint_content2);
            this.$axios
                .post('/api/complaints/updateByWaybill/' + this.freightbillId + '/' + this.form.complaint_content2)
                .then((res) => {
                    if (res.data.code == 200) {
                        console.log("adsasdasdasdasd");
                        // this.getData(this.pageparm);
                        this.$message({
                            type: 'success',
                            message: '数据修改成功！'
                        });
                        this.findCategory();
                        this.editVisible = false;
                    } else {
                        
                        this.$message({
                            type: 'info',
                         
                        });
                       this.editVisible = false;
                    }
                })
                .catch();
        },
    }
};
</script>

<style scoped>
.handle-box {
    margin-bottom: 20px;
}
.el-input {
    position: relative;
    font-size: 14px;
    display: inline-block;
    width: 180px !important;
}
.handle-select {
    width: 120px;
}

.handle-input {
    width: 300px;
    display: inline-block;
}
.table {
    width: 100%;
    font-size: 14px;
}
.red {
    color: #ff0000;
}
.mr10 {
    margin-right: 10px;
}
.table-td-thumb {
    display: block;
    margin: auto;
    width: 40px;
    height: 40px;
}
</style>
